<template>
<div class="ibox">
<input v-model="value" type="text" @input='changeInput' @blur="onblur" :placeholder="$t('common.qingshuruyouxiang')" />
    <div class="ibot" v-show='liArr.length&&value&&show'>
        <div class="ili" v-for='li in liArr' :key='li' @click='chooseVal(li)'>{{li}}</div>
    </div>
</div>
    
</template>

<script>

export default {
    // props:['value'],
    data(){
        return {
            show:false,
            value:'',
            emailArr:[
                "@qq.com",
                "@163.com",
                "@139.com",
                "@126.com",
                "@gmail.com",
                "@hotmail.com",
                "@yahoo.com",
                "@outlook.com",
            ],
            liArr:[]
        }
    },
    methods:{
        onblur(){
            let timer = setTimeout(()=>{
                clearTimeout(timer)
                this.show=false
            },0)
        },
        chooseVal(val){
            console.log(val)
            this.value = val
            this.show = false
            this.$emit('emailChange',this.value)
        },
        changeInput(e){
            this.show = true

            // console.log(e)
            this.liArr = this.emailArr.map(v=>{
                return this.value + v
            })
            this.$emit('emailChange',this.value)
        }
    }
}
</script>

<style lang="scss" scoped>
.ibox{
    position: relative;

    .ibot{
        max-height: 200px;
        overflow-y: scroll;
        // width:100%;
        background:#171A2B;
        padding:5px 10px;
        position: absolute;
        top:100%;
        left:0;
        z-index:400;
        border-radius: 4px;
        .ili{
            height:40px;
            line-height: 40px;
            font-size: #fff;
            border-bottom: 1px solid #444;
            &:last-child{
                border:0
            }
        }
        
    }
}
    input {
        width: 48vw;
        margin-left: 2vw;
        color: rgba(214, 214, 214, 100);
        font-size: 3.73vw;
        background-color: rgba(45, 47, 59, 100);
        border-width: 0;
      }
      input::-webkit-input-placeholder {
        color: rgba(79, 82, 93, 100);
      }
</style>